<template>
    <el-row class="demo-autocomplete">
        <el-col :span="12">
            <el-autocomplete
                    :style="{ width: width + 'px' }"
                    class="inline-input"
                    v-model="state1"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    @select="handleSelect"
            ></el-autocomplete>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        props: {
            filterValue: {
                type: String,
                default: () => 'value'
            },
            width: {
                type: String,
                default: () => '300'
            },
            data: {
                type: Array,
                default: () => []
            }
        },
        data() {
            return {
                state1: '',
            };
        },
        methods: {
            querySearch(queryString, cb) {
                var restaurants = this.data;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant[`${this.filterValue}`].toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            loadAll() {
                return this.data
            },
            handleSelect(item) {
                console.log(item);
                this.$emit('input', item.value)
            }
        },
        mounted() {
            this.data = this.loadAll();
        }
    }
</script>

<style scoped>

</style>